📝 변경 사항

TabNavigation 컴포넌트 추가

• 쿼리 파라미터 기반 탭 네비게이션 컴포넌트 구현
• 2개 또는 3개 탭 지원
• basePath, paramName 커스터마이징 가능
• 테스트 및 Storybook 작성 완료

Button 컴포넌트 확장

• xs 사이즈 추가 (h-10, 40px, radius: 12px)
• leave variant 추가 (모임 탈퇴 버튼용)
• chat variant 추가 (채팅 입장 버튼용)

Card 컴포넌트 확장

• leaveAndChatActions prop 추가 (조건부 버튼 렌더링)
• 모임 탈퇴 및 채팅 입장 버튼 추가

스케줄러 페이지 구현

• 쿼리 파라미터 기반 탭 전환 (/schedule?tab=current)
• Route Groups (components)로 탭별 컴포넌트 분리
  • current.tsx - 현재 모임
  • my.tsx - 나의 모임
  • history.tsx - 모임 이력

🔗 관련 이슈

Closes #67

🧪 테스트 방법

• 수동 테스트 검증(로컬 환경)

  • /schedule, /schedule?tab=current, /schedule?tab=my, /schedule?tab=history 접근 확인
  • 탭 클릭 시 쿼리 파라미터 변경 및 컨텐츠 전환 확인

• 유닛 테스트 검증

  • pnpm test tab-navigation --coverage
  • TabNavigation 쿼리 파라미터 기반 테스트

• 통합 테스트 검증

  • pnpm storybook → Shared/TabNavigation
  • 2개/3개 탭, 각 활성화 상태 확인

📸 스크린샷 (선택)

📋 체크리스트

• 관련 문서를 업데이트했습니다 (필요한 경우)

• 테스트를 추가/수정했습니다 (필요한 경우)

• Breaking change가 있다면 명시했습니다

💬 추가 코멘트

TabNavigation 사용법 (cc. @wooktori )

기본 사용:

import { TabNavigation } from '@/components/shared';

const tabs = [
  { label: '탭1', value: 'tab1' },
  { label: '탭2', value: 'tab2' },
];

<TabNavigation basePath='/your-page' tabs={tabs} />

페이지 구현:

'use client';

import { useSearchParams } from 'next/navigation';

export default function YourPage() {
  const searchParams = useSearchParams();
  const tab = searchParams.get('tab') || 'tab1';  // 디폴트

  return (
    <>
      <TabNavigation basePath='/your-page' tabs={tabs} />
      {tab === 'tab1' && <Tab1Component />}
      {tab === 'tab2' && <Tab2Component />}
    </>
  );
}

URL 예시:

• /schedule → 현재 모임 (디폴트)
• /schedule?tab=my → 나의 모임
• /schedule?tab=history → 모임 이력

참고

• 쿼리 파라미터로 탭 상태 관리
• 2개 또는 3개 탭 지원
• paramName 커스터마이징 가능 (기본: 'tab')

CodeRabbit Review는 자동으로 실행되지 않습니다.

Review를 실행하려면 comment에 아래와 같이 작성해주세요

@coderabbitai review